<script lang="tsx">
import { type ExtractPropTypes, computed, defineComponent } from 'vue'
const TitleProps = {
  columns: {
    type: Array,
    default: () => []
  },
  titleList: {
    type: Array,
    default: () => []
  },
  maxDeep: {
    type: Number,
    default: 1
  },
  // 边框
  showBorder: {
    type: Boolean,
    default: false
  },
  // 单元格底部边框
  borderBottom: {
    type: Boolean,
    default: true
  },
  // 是否吸顶
  isHeaderFixed: {
    type: Boolean,
    default: true
  },
  // 吸顶,表头离顶部定位top值
  headerFixedTopValue: {
    type: [Number, String],
    default: 88
  },
  // 行宽
  rowWidth: {
    type: Number,
    default: 375
  },
  // 表头单元格高度
  headerHeight: {
    type: [Number, String],
    default: 42
  },
  // 标题顶部边框
  showTitleTopBorder: {
    type: Boolean,
    default: false
  },
  headerBackground: {
    type: String,
    default: ''
  },
  fixedCol: {
    type: String,
    default: 'center'
  },
  htmlFontSize: {
    type: [Number, String],
    default: 100
  },
  // 单元格默认宽度
  fixedWidthDefault: {
    type: [Number, String],
    default: 70
  }
}
export type TitleProps = ExtractPropTypes<typeof TitleProps>
function changeSort(obj) {
   // 切换排序
  if (!('sort' in obj)) {
    return false
  }
  // this.$emit('changeSortHandler', { ...obj })
}
function justifyContent(item: String) {
  const obj = {
    left: 'flex-start',
    center: 'center',
    right: 'flex-end'
  }
  return obj[item || 'left']
}
export default defineComponent({
  name: 'TableTitle',
  // inheritAttrs: false,
  props: TitleProps,
  setup(props, { slots, attrs, emit, ...prop}) {
    // 单元格样式
    // console.log('titleslots===>', slots, attrs, emit, prop)
    const tableTitleCell = item => {
      // 注意！ 父组件再没有书写 v-slot 时子组件的 $scopedSlots 没有上述函数！
      // 因此再编写子组件渲染函数的时候注意检查
      let target = []
      const slotName = slots[item.slotHeader]
      console.log('slotName', typeof slotName)
      const isSlot = typeof slotName === 'function'
      if (isSlot) {
        target.push(
          slotName({
            titleItem: item
          })
        )
      } else {
        target.push(
          <span
            v-html={item.title}
            class={['table-title-cell-span']}
          ></span>
        )
      }
      return (
        <div
          class={['table-title-cell', { 'table-title-cell-sort': 'sort' in item && !isSlot }]}
          style={{
            'justify-content': justifyContent(item.align)
          }}
        >
          {target}
        </div>
      )
    }

    // th标签样式
    const thDom = col => {
      // console.log('col===>', props.columns)
      return props.columns.map((item, index, arr) => {
        return (
          <th
            key={index}
            attrs={{
              rowspan: item.rowSpan,
              colspan: item.colSpan
            }}
            class={[
              { 'show-border': props.showBorder },
              { 'border-bottom': props.borderBottom }
            ]}
            style={{
              'z-index': 'fixed' in item ? '60' : '',
              'text-align': item.align || (item.hasChildren ? 'center' : 'left'),
              background: props.headerBackground || undefined
            }}
            onClick={ e => changeSort(item)}
          >{tableTitleCell(item)}</th>
        )
      })
    }
    // thead标签样式
    const theadDom = () => {
      return (
        <thead
          class={[{ 'title-top-border': props.showTitleTopBorder }, 'table-thead']} 
        >
          <tr
            class='table-thead-th'
            style={
              {height: props.headerHeight + 'px'}
            }
          >
            {thDom()}
          </tr>
        </thead>
      )
    }
    // col标签样式,用来控制列的宽度
    const colgroups = () => {
      return (
        <colgroup>
          {props.columns.map((item, index) => {
            let colWidth = 100
            try {
              colWidth = (+item.width || props.fixedWidthDefault).toFixed(2)
            } catch (e) {}
            return (
              <col
                key={index}
                attrs={{
                  key: item.key
                }}
                style={{
                  width: props.fixedCol === 'center' && item.widthAuto ? 'auto' : colWidth + 'px'
                }}
              ></col>
            )
          })}
        </colgroup>
      )
    }
    return () => (
      <div
        class={[
          'table-title',
          { 'table-title-left': props.fixedCol === 'left' },
          { 'table-title-center': props.fixedCol === 'center' },
          { 'fixed-top': props.isHeaderFixed ? true : undefined }
        ]}
        style={{ top: props.headerFixedTopValue + 'px' }}
      >
        <table style={{ width: props.rowWidth + 'px' }}>{[colgroups(), theadDom()]}</table>
      </div>
    )
  }
})
</script>

<style lang="less" scoped>
.table-title {
  max-width: 100%;
  &.fixed-top {
    position: sticky;
    left: 0;
    top: 88px;
    z-index: 70;
  }
  &-center {
    overflow: scroll;
    &::-webkit-scrollbar {
      display: none;
      width: 0;
      background: transparent;
    }
  }
  table {
    min-width: 100%;
    min-height: 30px;
    table-layout: fixed;
    background-color: #fff;
    // position: relative;
    .title-top-border::before {
      content: '';
      width: 100%;
      height: 1px;
      background-color: #dcdee0;
      position: absolute;
      top: 0;
      left: 0;
      z-index: 80;
      transform: scale(1, 0.5);
    }

    th {
      background-color: #fff;
      position: relative;
      line-height: 1;
      vertical-align: inherit;
      img {
        width: 11px;
        height: 14px;
        margin-left: 4px;
        vertical-align: middle;
      }
      .table-title-cell {
        padding: 4px 8px;
        &-sort {
          display: flex;
          align-items: center;
          &-block {
            display: inline-block;
          }
        }
        &-span {
          display: inline-block;
          vertical-align: middle;
        }
      }
      &.border-bottom::after {
        content: '';
        width: 100%;
        height: 1px;
        background-color: #dcdee0;
        position: absolute;
        bottom: 0;
        left: 0;
        z-index: 10;
        -webkit-transform: scale(1, 0.5);
        transform: scale(1, 0.5);
      }
      &.show-border::after {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        width: 200%;
        height: 200%;
        background-color: transparent;
        // border-top: 1px solid #F1F1F1;
        border-left: 1px solid #dcdee0;
        border-bottom: 1px solid #dcdee0;
        transform-origin: 0 0;
        transform: scale(0.5);
        box-sizing: border-box;
        pointer-events: none;
      }
      &.show-border.column-last::after {
        border-right: 1px solid #dcdee0;
      }
    }
  }
}
</style>
